<!-- 审计日志 -->
<template>
  <div class="dashboard-editor-container">
		<el-row style="background: #fff; padding: 16px 16px 0;">
      <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset"/>
      <div class="tabclick">
        <div class="tabitem" @click="handleClick()">
          <span><i :class="tab ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
        </div>
      </div>
      <el-row>
        <el-tabs type="border-card" v-if="tab" style="margin-top:16px;" @tab-click="tabClick">
          <el-tab-pane label="按日统计分析" lazy>
            <el-col :xs="24" :sm="24" :lg="24">
              <barchart :chartData="barchartData" @barclick="barclick"/>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="按审计类型统计分析" lazy>
            <el-col :xs="24" :sm="24" :lg="24">
              <piechart :chartData="pieData" @pieclick="echartsClick" title="按审计类型统计分析"/>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="padding-right: 8px;">
        <!-- <span class="title">事件日志列表</span> -->
        <el-table stripe border :data="tableData" style="width: 100%; margin-top: 32px">
          <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
          <el-table-column label="操作时间" prop="TransTime"   width="160px"></el-table-column>
          <el-table-column label="操作地址" prop="FromIP"   width="160px"></el-table-column>
          <el-table-column label="审计类型" prop="Operate"  width="250px"></el-table-column>
          <el-table-column label="操作结果" prop="Result"  width="120px">
            <template slot-scope="scope">
              <p style="color:#67C23A" v-if="scope.row.Result === 0" type="success">成功</p>
              <p style="color:#F56C6C" v-if="scope.row.Result !== 0" type="danger">失败</p>
            </template>
          </el-table-column>
          <el-table-column label="操作描述" prop="Descp" show-overflow-tooltip ></el-table-column>
        </el-table>
        <el-pagination 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" 
          :current-page=pageNum
          :page-size=pageSize
          background 
          layout="total, prev, pager, sizes, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { connrequest } from "@/api/firstPage.js"
import { getNowDay, parseTime } from "@/utils/index.js";
import connsearch from "@/components/connSearch";
import barchart from "./components/barchart2.vue";
import piechart from "./components/piechart.vue";
export default {
  components: { connsearch, barchart, piechart },
  data() {
    let that = this
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tab: false,
      tableData:[],
      pieData: [],
      barchartData: {xAxis:[],series:[]},
      searchform:{},
      searchobj: {},
      tabTitle: '按日统计分析',
      formOptions:[
        {
          col: 8,
          label: "日期",
          prop: "timeRange",
          element: "el-date-picker",
          type: "",
          events: {
            input(val) {
              that.searchform.timeRange = val
            },
          },
        },
        {
          col: 4,
          label: "操作结果",
          prop: "result",
          element: "el-select",
          initValue: 2,
          placeholder: "请选择审计类型",
          options:[
            { label: "全部", value: 2},
            { label: "成功", value: 0},
            { label: "失败", value: 1}
          ],
          events: {
            input(val) {
              that.searchform.result = val
            },
          },
        },
        {
          col: 8,
          label: "操作描述",
          prop: "Descp",
          element: "el-input",
          placeholder: "请输入操作描述,支持模糊查询。",
          maxlength: 50,
          events: {
            input(val) {
              that.searchform.Descp = val
            },
          },
        }
      ]
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.pageSize = (Cookies.get('Zhuoguan_DefaultPageLength') || 10) * 1;

    let xTime = new Date().getTime()
    let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime() 
    let startTime = endTime - ((Cookies.get('Zhuoguan_DefaultLogDays') || 7) * 24 * 3600 * 1000);
    // let arr = [ parseTime(startTime), parseTime(xTime)]
    let arr = [ parseTime(startTime), '']
    this.formOptions.map( item => {
      if(item.label === '日期'){
        item.initValue = arr
      }
    })
    this.$set(this.searchform,'timeRange', arr)
    this.$set(this.searchform,'result', 2)
    this.getData()
    this.GetSecurityLogSumGroupByDate()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    async getData(searchobj = {}){
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Result: this.searchform.result,
          Descp: this.searchform.Descp,
          ...searchobj
        }
      }
      const res = await connrequest('GetSecurityLog', data)
      res.Data = res.Data || []
      res.Data.map( item =>{
        item.TransTime = parseTime(item.TransTime, '{y}-{m}-{d} {h}:{i}:{s}')
        // item.Result = item.Result === 0 ? '全部' : (item.Result === 1 ? '成功' : '失败')
      })
      this.tableData = res.Data
      this.total = res.Paging.TotalCount
    },
    handleClick() {
      this.tab = !this.tab
    },
    // 获取事件日期统计
    async GetSecurityLogSumGroupByDate(){
      let xAxis = []
      let series= []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Result: this.searchform.result,
          Descp: this.searchform.Descp || '',
        }
      }
      const res = await connrequest('GetSecurityLogSumGroupByDate', data)
      res.Data = res.Data || []
      res.Data.map( item =>{
        xAxis.push(item.Name)
        series.push(item.Count)
      })
      this.barchartData = {xAxis,series}
    },
    async GetSecurityLogSumGroupByOpt(){
      let arr = []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          Operate:this.searchform.Operate,
        }
      }
      const res = await connrequest('GetSecurityLogSumGroupByOpt', data)
      res.Data = res.Data || []
      res.Data.map( item =>{
        arr.push({name: item.Name, value: item.Count})
      })
      this.pieData = arr
    },
    barclick(val){
      this.pageNum = 1
      this.searchobj = { StartTime: `${val} 00:00:00`, EndTime: `${val} 23:59:59` }
      this.getData(this.searchobj)
    },
    tabClick(row){
      this.tabTitle = row.label
      switch (row.label) {
        case '按日统计分析':
          this.GetSecurityLogSumGroupByDate()
          break;
        case '按审计类型统计分析':
          this.GetSecurityLogSumGroupByOpt()
          break;
      }
    },
    echartsClick(val,title){
      this.pageNum = 1
      if(title === '按日统计分析'){
        this.searchobj = { StartTime: `${val} 00:00:00`, EndTime: `${val} 23:59:59` }
        this.getData(this.searchobj)
      }else if(title === '按审计类型统计分析'){
        this.searchobj = { Operate: val }
        this.getData(this.searchobj)
      }
    },
    // 搜索
    search(val) {
      this.pageNum = 1
      this.searchobj = {}
      this.searchform = {...val}
      if(this.searchform.timeRange){
        this.searchobj = { StartTime: this.searchform?.timeRange[0] || '', EndTime: this.searchform?.timeRange[1] || '' }
      }
      this.getData()
      switch (this.tabTitle) {
        case '按日统计分析':
          this.GetSecurityLogSumGroupByDate()
          break;
        case '按审计类型统计分析':
          this.GetSecurityLogSumGroupByOpt()
          break;
      }
    },
    // 重置
    reset(){
      let xTime = new Date().getTime()
      let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime() 
      let startTime = endTime - ((Cookies.get('Zhuoguan_DefaultLogDays') || 7) * 24 * 3600 * 1000);
      // let arr = [ parseTime(startTime), parseTime(xTime)]
      let arr = [ parseTime(startTime), '']
      this.pageNum = 1
      this.formOptions = this.formOptions.map( item => {
        if(item.label === "日期"){
          item.initValue = arr
        }
        return item
      })
      this.searchform = {}
      this.$set(this.searchform,'timeRange', arr)
      this.$set(this.searchform,'result', 2)
      this.$refs.connsearch.addInitValue()
      this.getData()
      switch (this.tabTitle) {
        case '按日统计分析':
          this.GetSecurityLogSumGroupByDate()
          break;
        case '按审计类型统计分析':
          this.GetSecurityLogSumGroupByOpt()
          break;
      }
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.pageNum = 1
      this.getData({...this.searchobj, StartTime: this.searchobj?.StartTime || this.searchform.timeRange?.[0] ||  '', EndTime: this.searchobj?.EndTime || this.searchform.timeRange?.[1] ||  ''})
    },
    handleCurrentChange( pageNum ){
      this.pageNum = pageNum
      this.getData({...this.searchobj, StartTime: this.searchobj?.StartTime || this.searchform.timeRange?.[0] ||  '', EndTime: this.searchobj?.EndTime || this.searchform.timeRange?.[1] ||  ''})
    },
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
@import "./components/css/conncss.scss";
</style>